<template>
    <div class="amap-page-container">
        <el-amap ref="map" vid="amapDemo"  :center="center" :zoom="zoom" :plugin="plugin"
                 :events="events" class="amap-demo">
            <el-amap-marker v-for="marker in markers":position="marker.position" :events="marker.events" :key="marker.key" :extData="marker.extData" ></el-amap-marker>
            <el-amap-info-window
                    v-if="window"
                    :position="window.position"
                    :visible="window.visible"
                    :content="window.content"
                    :offset="window.offset"
                    :close-when-click-map="true"
                    :is-custom="true"
            >
                <div id="info-window">
                    <p>运营商名：{{ window.address }}</p>
                </div>
            </el-amap-info-window>
        </el-amap>
        <!-- <div class="toolbar">
          <button @click="getMap()">get map</button>
        </div> -->
    </div>
</template>

<style>
    .amap-page-container {
        height: 100%;
    }
    .frame .textstyle {
        font-size: 20px;
        margin-top: 15px;
        margin-left: 30px;
    }
</style>
<script>
    import { AMapManager } from 'vue-amap';
    import img from '@/assets/img/自动售货机.png'
    // import { AMap } from 'vue-amap';
    export default {
        mounted() {//默认第一次加载
            coordinate(this)
        },
        data () {
            return {
                windows: [],
                window: "",
                form: {
                    userName: '',
                    telephone: '',
                    plateNumber: '',
                    loginTime: '',
                    longitude: '',
                    latitude: ''
                },
                dialogFormVisible: false,
                visible: false,
                marker: [],
                demo: '',
                zoom: 18,
                center: [118.178342, 24.492459],
                markers: [],
                events: {
                    init: (o) => {
                        console.log(o.getCenter())
                        console.log(this.$refs.map.$$getInstance())
                        o.getCity(result => {
                            console.log(result)
                        })
                    },
                    'moveend': () => {
                    },
                    'zoomchange': () => {
                    },
                    click: (e) => {
                        console.log(this.$refs)
                        // let {lng, lat} = e.lnglat;
                        // self.lng = lng;
                        // self.lat = lat;
                        // console.log(self.lng, self.lat)
                        // let points = [self.lng, self.lat]
                        // this.getAddress(points)
                        // let marker = {
                        //     position: [self.lng, self.lat]
                        // };
                        // if (!this.markers.length) return;
                        // this.markers.splice(this.markers.length - 1, 1);
                        //
                        // this.markers.push(marker);
                    }
                },

                getAddress(points) {
                    let geocoder = new AMap.Geocoder({radius: 1000, extensions: "all"})
                    geocoder.getAddress(points, (status, result) => {
                        if (status === 'complete' && result.regeocode) {
                            this.address = result.regeocode.formattedAddress
                            console.log(this.address)
                        }
                    })
                },
                plugin: ['ToolBar', {
                    pName: 'MapType',
                    defaultType: 0,
                    events: {
                        init(o) {
                            console.log(o);
                        }
                    }
                }],
            }
        },
        methods: {
            getMap() {
                console.log(AMapManager._componentMap);
                // gaode map instance
                console.log(AMapManager._map);
                alert('click text');
            }
        }
    };
    function coordinate($this) {
        $this.$axios.post('coordinate').then(resp =>{
            if (resp){
                // console.log(resp.data[0].coordinate)
                var n=0;
                var lnglats = [];
                var id=[];
                var i;
                for( i = 0;i < resp.data.length;i++){
                    lnglats.push(resp.data[i].coordinate)
                    // console.log("---->"+resp.data[i].coordinate.split(',')[0]);
                    // console.log(lnglats+"++++++++")
                    id.push(resp.data[i].vmid)
                    $this.markers.push({
                        extData:resp.data[i].operatorName,
                        key:resp.data[i].vmid,
                        position:[resp.data[i].coordinate.split(',')[0],resp.data[i].coordinate.split(',')[1]],
                        events: {
                            click(e){
                                //alert(resp.data[i].coordinate.split(',')[0])
                                alert("运营商："+e.target.Ce.extData)
                                // alert(i);
                                // n=n+1;

                            }
                        },
                        // id:i,
                    },)
                    console.log(lnglats[i])
                }

            }
        })
    }
</script>

